<template>
  <view class="form-wrap">

    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" :labelWidth="labelWidth"
      :disabled="disabled">
      <div v-for="(item, index) in inputlist" :key="index">
        <slot name="jsonForms" :item="item" :data="formData" @change="change" v-if="item.type == 'jsonForms'">
        </slot>
        <formselect v-else-if="item.type == 'select'" :item="item" :data="formData" @change="change"
          v-model="formData[item.value]">
        </formselect>
        <zswitch v-else-if="item.type == 'switch'" :item="item" :data="formData" @change="change"
          v-model="formData[item.value]">
        </zswitch>
        <selectProps v-else-if="item.type == 'selectProps'" :item="item" :data="formData" @change="change"
          v-model="formData[item.value]">
        </selectProps>
        <deptid v-else-if="item.type == 'tree'" :item="item" :data="formData" v-model="formData[item.value]"
          @change="change">
        </deptid>
        <dictSelect v-else-if="item.type == 'dictSelect'" :item="item" :data="formData" @change="change"
          v-model="formData[item.value]">
        </dictSelect>
        <!-- <FormCreate  v-else-if="item.type == 'jsonForms'"
          :item="item"
          :data="formData"
          @change="change"
          v-model="formData[item.value]"></FormCreate> -->

        <!-- <view class="tag" v-else-if="item.type == 'tag'">
          {{ item.label }}
        </view> -->
        <levelType v-else-if="item.type == 'levelType'" :item="item" :data="formData" v-model="formData[item.value]"
          @change="change">
        </levelType>
        <datetime v-else-if="item.type == 'datetime'" :item="item" :data="formData" v-model="formData[item.value]">
        </datetime>
        <province v-else-if="item.type == 'province'" :item="item" :data="formData" v-model="formData[item.value]" @change="change">
        </province>
        <sourceLocation v-else-if="item.type == 'sourceLocation'" :item="item" :data="formData" v-model="formData[item.value]" @change="change">
        </sourceLocation>
        
        <file v-else-if="item.type == 'file'" :item="item" :data="formData" v-model="formData[item.value]">
        </file>
        <forminput v-else :item="item" :data="formData" v-model="formData[item.value]"></forminput>
      </div>
    </u--form>
  </view>
</template>

<script>
import forminput from "./components/forminput.vue";
import formselect from "./components/formselect.vue";
import zswitch from "./components/zswitch.vue";
import datetime from "./components/datetime.vue";
import qs from "qs";
import deptid from "./components/deptId.vue";
import file from "./components/file.vue";
// import month from "./components/month.vue"
import selectProps from "./components/selectProps.vue";
import dictSelect from "./components/dictSelect.vue";
import levelType from "./components/levelType.vue"
import province from "./components/province.vue";
import sourceLocation from "./components/sourceLocation.vue";

// import FormCreate from "./components/FormCreate.vue";
// datetime.vue
export default {
  name: "formz",
  components: {
    province,
    forminput,
    formselect,
    zswitch,
    selectProps,
    datetime,
    deptid,
    dictSelect,
    sourceLocation,
    file,
    levelType
    // month
  },
  props: {
    data: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    inputs: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
    setdefaultValuefalg: {
      typeof: Boolean,
      default: false,
    },
    labelWidth: {
      typeof: String,
      default: "200rpx",
    },
    disabled: {
      typeof: Boolean,
      default: false,
    },
  },
  computed: {
    inputlist() {
      return this.inputs || [];
    },
    rules() {
      let r = {};
      if (!this.inputlist || Object.keys(this.formData).length == 0) {
        return {};
      }
      this.inputlist.forEach((e) => {
        let rules = e.rules || e.rule || false;
        if (rules) {
          r[e.value] = rules.map((e) => {
            return {
              ...e,
              trigger: "blur",
            };
          });
        } else if (e.required) {
          r[e.value] = [
            {
              required: true,
              message: "请输入" + e.label,
              trigger: "blur",
            },
          ];
        } else if (e.type == "yzm") {
          r[e.value] = [
            {
              required: true,
              message: "请输入" + e.label,
              trigger: "blur",
            },
          ];
        }
      });

      return r;
    },
  },
  watch: {
    inputlist: {
      handler(n, o) {
        console.log(n, o, this.data,this.formData, 123);
        if (!n || n.length == 0) {
          return [];
        }
        o = o || [];

        const isEqual = (obj1, obj2) =>
          qs.stringify(obj1) === qs.stringify(obj2);
        let edtinputso = new Set([
          ...o.filter((e) => !n.some((f) => isEqual(e, f))),
        ]);

        let edtinputs = new Set([
          ...n.filter((e) => !o.some((f) => isEqual(e, f))),
        ]);

        if (
          !this.setdefaultValuefalg &&
          this.data && Object.keys(this.data).length != 0 &&
          qs.stringify(this.formData) == qs.stringify(this.data)
        ) {
          return;
        }

        if (
          !(
            Object.keys(this.data).length != 0 &&
            qs.stringify(this.formData) == qs.stringify(this.data)
          )
        ) {
          edtinputso.forEach((e) => {
            delete this.formData[e.prop];
          });
        }
        if (
          Object.keys(this.data).length != 0 &&
          qs.stringify(this.formData) == qs.stringify(this.data)
        ) {
          edtinputs.forEach((e) => {
            if (!e.value) {
              return;
            }
            if (!Object.keys(this.formData).includes(e.value)) {
              // state.formData[e.value] = "";

              this.$set(this.formData, e.value, "");
            }
            if (this.formData[e.value] || this.formData[e.value] == "0") {
            } else if (e.defaultValue) {
              this.$set(this.formData, e.value, e.defaultValue);
              // this.formData[e.value] = e.defaultValue;
            }
          });
        } else {
          edtinputs.forEach((e) => {
            if (!e.value) {
              return;
            }

            if (!Object.keys(this.formData).includes(e.value)) {
              // this.formData[e.value] = "";
              this.$set(this.formData, e.value, "");
            }
            if (
              e.defaultValue ||
              e.defaultValue == "0" ||
              e.defaultValue == ""
            ) {
              this.$set(this.formData, e.value, e.defaultValue);
            }
          });
        }
      },
      deep: true,
      immediate: true,
    },
    data: {
      handler(n, o) {
        for (let key in this.data) {
          this.$set(
            this.formData,
            key,
            this.data[key] == null ? "" : this.data[key]
          );
        }
        // this.formData = this.$u.deepClone(this.data);
      },
      immediate: true,
    },
    // rules: {

    // },
    formData: {
      handler() {
             
        this.$emit("change", this.formData);
      },
      deep: true,

    }
  },
  data() {
    return {
      inputFlag: true,
      formData: {},
    };
  },
  methods: {
    change(data = {}) {
      console.log(typeof data, data,'data123');
      this.formData = {
        ...this.formData,
        ...data,
      };
    },

    async validate(e) {
      await this.$refs.uForm.validate();
      return this.formData;
    },
  },
  mounted() {
    // setTimeout(() => {
    //   // this.formData.type = "1";
    //   console.log(123456);
    // }, 1000);
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    // this.$refs.uForm.setRules(this.rules);
  },
};
</script>
<style scoped lang="scss">
.tag {
  height: 60rpx;
  background-color: #f4f4f5;
  color: #909399;
  line-height: 60rpx;
  font-size: 24rpx;
  padding-left: 20rpx;
  // margin-bottom: 20rpx;
  // margin-top: -30rpx;
  border-radius: 6rpx;
}
</style>
